{include file="public/head"}
<div class="main">
    {include file="public/left"}
    <div class="middle">
    {include file="public/header"}
    <div class="index_content">
        <div class="index_left">
            <img src="{$osslink}static/index/image/index/en_qr.png?{$version}" />
        </div>
        <div class="index_right">
            <div class="index_header">
                <div class="layui-carousel index_header_img" id="index_header_img">
                    <div carousel-item>
                      <div><img width="100%" height="100%" src="{$osslink}static/index/image/banner1.jpg?{$version}"></div>
                      <div><img width="100%" height="100%" src="{$osslink}static/index/image/banner2.jpg?{$version}"></div>
                      <div><img width="100%" height="100%" src="{$osslink}static/index/image/banner3.jpg?{$version}"></div>
                    </div>
                </div>
                <div class="index_header_info">
                    <div class="header_info_1" style="margin-left: 0px;margin-right: 0px;">
                        <button class="layui-btn layui-btn-primary" id="regist">{:__('免费注册')}</button>
                        <button class="layui-btn layui-btn-primary" id="login">{:__('登陆')}</button>
                    </div>
                    <div class="header_info_2" style="margin-left: 0px;margin-right: 0px;">
                        <button style="margin-right: 0px;margin-left: 0px;" class="layui-btn layui-btn-primary" id="release">{:__('发布任务')}</button>
                    </div>
                    <div class="layui-tab layui-tab-card">
                       
                        <ul class="layui-tab-title">
                            <li class="layui-this">{:__('公告')}</li>
                            <li>{:__('规则')}</li>
                            <li>{:__('安全交易')}</li>
                        </ul>
                        <div class="layui-tab-content" id="header_tab_content">
                            
                        </div>
                       
                    </div>
                </div>
            </div>
            
            <div class="index_foot">

            </div>
        </div>
    </div>
    {include file="public/foot"}
    </div>
    {include file="public/right"}
</div>
{include file="public/footer"}
<script>
    if(token != '' && token != undefined && token != null){
        $(".header_info_1").html('<button id="jointask" class="layui-btn layui-btn-primary" style="margin-left:0px;margin-right:0px;width:100%;color:#666">{:__("我的任务")}</button>');
    }
    
    $(".header_sel .layui-form-select").addClass('layui-form-selected');
    $(".layui-form-selected").click(function(){
        $(this).addClass('layui-form-selected');
    });

    
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#index_header_img'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
    $(document).on("click","#jointask",function(){
        window.location.href="/index/User/jointask";
    })
    $("#login").click(function(){
        window.location.href="/index/Index/login";
    });
    $("#regist").click(function(){
        window.location.href="/index/Index/regist";
    });
    $("#release").click(function(){
        window.location.href="/index/Index/release";
    });
    var nowtab = 0;
    var beforemove = [];
    $(document).on('click',".to_right",function(){
        var lefttmp = $(this).siblings(".layui-tab-title").scrollLeft();
        var move = $(this).siblings(".layui-tab-title").find("li").eq(nowtab)[0].offsetWidth;
        left = parseInt(lefttmp)+(move+12);
        $(this).siblings(".layui-tab-title").scrollLeft(left);
        var afterleft = $(this).siblings(".layui-tab-title").scrollLeft();
        var canmove = parseInt(afterleft)-parseInt(lefttmp);
        if(canmove > 0){
            beforemove.push(canmove);
        }
        if(canmove > 0){
            nowtab++;
        }
        
    });
    $(document).on('click',".to_left",function(){
        var left = $(this).siblings(".layui-tab-title").scrollLeft();
        if(parseInt(left) <= 0){
            $(this).siblings(".layui-tab-title").scrollLeft(0);
            nowtab = 0;
            return false;
        }
        // var move = $(this).siblings(".layui-tab-title").find("li").eq(nowtab-1)[0].offsetWidth;
        move = beforemove.pop();
        left = parseInt(left)-move;
        $(this).siblings(".layui-tab-title").scrollLeft(left);
        nowtab--;
    });
    $(document).on('click',".customized",function(){
        var url = $(this).attr("data-target");
        window.location.href=url;
    });
    var missionclass='';
    var missionclassobj = {};
    function initdata(){
        mission_category = getLocalStorage("mission_category");
        mission_categoryObj = JSON.parse(mission_category);
        var height = $("#task_list_header")[0].offsetHeight;
        var h = parseInt(height)+10;
        $(".index_left img").css('margin-top',h+'px');
        homeCatList();
    }
    var mission_category = getLocalStorage("mission_category");
    if(mission_category != '' && mission_category != null && mission_category != undefined){
        initdata();
    } else {
        $(document).queue('mission_category,',function(){
            initdata();
        });
    }
    
    function homeCatList(){
        
        var htl = '';
        var mission_categorystr = '';
        var j= 0;
        for(i in mission_categoryObj){
            if(j == 4){
                break;
            }
            if(j == 3){
                mission_categorystr += i;
            } else {
                mission_categorystr += i+',';
            }
            j++;
        }
        var len = mission_categorystr.length;
        if(mission_categorystr[len-1] == ','){
            mission_categorystr = mission_categorystr.slice(0,len-1);
        }
        $.ajax({
            url:'/api/mission/homeCatList',
            type:'get',
            data:{pid:mission_categorystr,limit:10},
            success:function(ret){
                if(ret['code'] == 1){
                    var data = ret['data'];
                    var classtotal = 0;
                    for(i in data){
                        if(classtotal == 4){
                            break;
                        }
                        missionclass += i+',';
                        missionclasslen = missionclass.length;
                        if(missionclass[len-1] == ','){
                            missionclass = missionclass.slice(0,len-1);
                        }
                        htl += '<div class="index_bottom">'+
                                '<div class="index_bottom_title">'+
                                '<h2><a href="/index/Index/tasklist">'+
                                    data[i]['main']['cat_name']+'</a></h2>'+
                                '<i class="layui-icon to_left">&#xe603;</i>'+
                                '<ul class="layui-tab-title" data-target="'+i+'">';
                        var child = data[i]['_child'];
                        key = 0;
                        for(j in child){
                            if(key == 0){
                                htl+='<li data-target="'+j+'" class="layui-this">'+child[j]['cat_name']+'</li>';
                                var missonobj = child[j]['missions'];
                                var tab1name = child[j]['cat_name'];
                                var tab1id = child[j]['cat_id']
                                missionclassobj[i] = j;
                            } else {
                                htl+='<li data-target="'+j+'">'+child[j]['cat_name']+'</li>';
                            }
                            key++;
                        }
                        htl+='</ul><i class="layui-icon to_right">&#xe602;</i></div>'+
                            '<div class="index_bottom_content">'+
                            '<img src="{$osslink}static/index/image/catimg/cat_'+i+'.jpg?{$version}"/>'+
                            '<ul class="bottom_list" id="tab_'+i+'">';
                        for(k in missonobj){
                            htl+='<dl><a href="/'+missonobj[k]['route']+'">$'+missonobj[k]['money']+'&nbsp;'+missonobj[k]['title']+'</a></dl>';
                        }

                        htl+='<dl><a href="/index/Index/tasklist?id='+tab1id+'">{:__("全部")}&nbsp;'+tab1name+'&nbsp;{:__("任务")}>></a></dl>';
                        htl+='</ul>'+
                                '<ul class="bottom_introduct">'+
                                    '<h2>'+tab1name+'</h2>'+
                                    '<dl>{:__("任务备选稿件数")}：<span id="contibute'+i+'">0</span>个</dl>'+
                                    '<dl>{:__("任务赏金")}：<span id="mission_money'+i+'">0</span></dl>'+
                                    '<dl>{:__("任务总数")}：<span id="mission_num'+i+'">0</span></dl>'+
                                    '<dl>{:__("任务平均价")}：<span class="avg_money" id="avg_money'+i+'">$0</span></dl>'+
                                    '<dl><button class="layui-btn layui-btn-primary customized" data-target="/index/Index/release">{:__("立刻定制")}</button></dl>'+
                                '</ul>'+
                            '</div>'+
                        '</div>';
                        classtotal++;
                    }
                    $(".index_header").after(htl);
                    $(document).dequeue('getclass');
                } else if(ret['code'] != 401){
                    layer.msg("{:__('分类详情加载失败')}",{icon:3});
                }
            }
        });
    }
    $(document).queue('getclass',function(){
        $.ajax({
            url:'/api/mission/getOptions',
            type:"post",
            data:{params:'mission_category_stat',cat_ids:missionclass},
            success:function(ret){
                if(ret['code'] == 1){
                    var mission_category_stat = ret['data']['mission_category_stat'];
                    for(i in mission_category_stat){
                        var key = missionclassobj[i];
                        $("#contibute"+i).text(mission_category_stat[i][key]['contibute']);
                        $("#mission_money"+i).text(mission_category_stat[i][key]['mission_money']);
                        $("#mission_num"+i).text(mission_category_stat[i][key]['mission_num']);
                        $("#avg_money"+i).text('$'+mission_category_stat[i][key]['avg_money']);
                    }
                    mission_category_statstr = JSON.stringify(mission_category_stat);
                    localStorage.setItem('mission_category_stat',mission_category_statstr);
                } else if(ret['code'] != 401){
                    layer.msg("{:__('分类获取失败')}",{icon:2});
                }
            }
        })
    });

    $(document).on("click",".index_bottom_title .layui-tab-title li",function(){
        var _this = $(this);
        var parentid = _this.parent().attr("data-target");
        var id = _this.attr("data-target");
        var mission_category_stat = localStorage.getItem("mission_category_stat")
        var mission_category_statobj = JSON.parse(mission_category_stat);
        $("#contibute"+parentid).text(mission_category_statobj[parentid][id]['contibute']);
        $("#mission_money"+parentid).text(mission_category_statobj[parentid][id]['mission_money']);
        $("#mission_num"+parentid).text(mission_category_statobj[parentid][id]['mission_num']);
        $("#avg_money"+parentid).text('$'+mission_category_statobj[parentid][id]['avg_money']);
        var index_title = _this.text();
        _this.parent().parent().parent().find(".bottom_introduct h2").text(index_title);
        $.ajax({
            url:'/api/mission/index',
            data:{limit:10,page:1,cat_id:id},
            type:'get',
            success:function(ret){
                var htl = "";
                var tabname = _this.text();
                if(ret['code'] == 1){
                    if(ret['data'] == '' || ret['data'] == null || ret['data'] == undefined){
                        return false;
                    }
                    for(i in ret['data']['ls']){
                        if(ret['data']['ls'][i]['title'] == null || ret['data']['ls'][i]['title'] == undefined || ret['data']['ls'][i]['title'] == ''){
                            ret['data']['ls'][i]['title'] = '{:__("暂无标题")}';
                        }
                        htl+='<dl><a href="/'+ret['data']['ls'][i]['route']+'">$'+ret['data']['ls'][i]['money']+'&nbsp;'+ret['data']['ls'][i]['title']+'</a></dl>';
                    }
                    htl+='<dl><a href="/index/Index/tasklist?id='+id+'">{:__("全部")}&nbsp;'+tabname+'&nbsp;{:__("任务")}>></a></dl>';
                    $("#tab_"+parentid).html(htl);
                } else if(ret['code'] !=401){
                    layer.msg('{:__("加载列表失败")}',{icon:2});
                }
            }
        })
    });
    $.ajax({
        url:'/api/info/listbycat',
        type:"post",
        data:{limit:5},
        success:function(ret){
            var htl = "";
            if(ret['code'] == 1){
                if(ret['data'] == '' || ret['data'] == null || ret['data'] == undefined){
                    return false;
                }
                for(i in ret['data']){
                    htl += "<ul>";
                    htl += "<h6>"+ret['data'][i]['name']+"</h6>";
                    for(j in ret['data'][i]['_list']){
                        htl += "<li><a  href='/"+ret['data'][i]['_list'][j]['route']+"'>"+ret['data'][i]['_list'][j]['title']+"</a></li>";
                    }
                    htl += "</ul>";
                }
                $(".index_foot").html(htl);
            } else if(ret['code'] !=401){
                layer.msg('{:__("加载底部列表失败")}',{icon:2});
            }
        }
    });
    $.ajax({
        url:'/api/info/listbycat',
        type:"get",
        data:{limit:5,cat_limit:3,cat_id:'30,73,74'},
        success:function(ret){
            var htl = "";
            if(ret['code'] == 1){
                if(ret['data'] == '' || ret['data'] == null || ret['data'] == undefined){
                    return false;
                }
                var flag = 0;
                for(i in ret['data']){
                    if(flag == 0){
                        htl += '<div class="layui-tab-item layui-show">';
                    } else {
                        htl += '<div class="layui-tab-item">';
                    }
                    for(j in ret['data'][i]['_list']){
                        htl += '<dl><a href="/'+ret['data'][i]['_list'][j]['route']+'">'+ret['data'][i]['_list'][j]['title']+'</a></dl>';
                    }
                    htl += '</div>';
                    flag ++;
                }
                $("#header_tab_content").html(htl);
            } else if(ret['code'] !=401){
                layer.msg('{:__("加载右部列表失败")}',{icon:2});
            }
        }
    });
</script>